﻿<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height: 100px; border-bottom-width: 1px; padding: 10px; font-size: 14px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Datagrid/ViewTooltipSource" target="_blank">点击查看扩展代码</a>
        <br />
        js依赖项：
        <br />
        [query-1.11.0.js]、[jquery.jdirk.js]、[jquery.easyui.min.js]、[jeasyui.extensions.datagrid.getDom.js]、[jeasyui.extensions.datagrid.getColumnInfo.js]、[jeasyui.extensions.datagrid.getRowData.js]、[jeasyui.extensions.datagrid.tooltip.js]
    </div>
    <div data-options="region:'center',border:false,title:'此处仅显示“功能演示”选项卡所示功能基于本扩展的实现源码'" style="padding: 15px; font-size: 14px;">
        <a href="~/Demos/ExtensionDemos/Datagrid/TooltipDemo.rar" target="_self">下载本扩展功能演示Demo</a>
        <br />
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:10%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>rowTooltip</td>
                <td>Boolean 类型或 Function 类型</td>
                <td>
                    该属性表示是否启用行数据的 tooltip 功能；其值可以是以下两种类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Boolean 类型，表示是否启用行数据的 tooltip 功能；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Function 类型，签名为 function(rowIndex, rowData)；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>如果该参数是一个回调函数，则表示启用行数据的 tooltip 功能，并且该函数的返回值为 tooltip 的 content 值。<br />
                    注意：当启用该配置属性后，所有列的 tooltip 属性就会自动失效。
                </td>
                <td>false</td>
            </tr>
            <tr>
                <td>tooltipDelay</td>
                <td>Number 类型</td>
                <td>
                    该属性表示 rowTooltip 为 true 或 列的扩展属性 tooltip 为 true 时，显示 tooltip 时的延迟毫秒数；
                </td>
                <td>300</td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展方法API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width:5%;">重写</td>
                <td style="width:7%;">参数</td>
                <td>描述</td>
            </tr>
            <tr>
                <td>beginEdit</td>
                <td>是</td>
                <td>index</td>
                <td>
                    重写 easyui-datagrid 的原生方法 beginEdit ，以支持自定义属性 rowTooltip 和列属性 tooltip 的扩展功能；
                </td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            列扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>tooltip</td>
                <td>Boolean 类型</td>
                <td>
                    表示是否启用该列的 tooptip 效果，其值可以是以下两种类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Boolean 类型，表示是否启用该列的 tooltip；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Function 类型，其函数签名为 function (value, rowData)，表示为该列启用 tooltip 的方式；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>该回调函数返回一个 String 类型值，表示 tooltip 的 content 内容。
                </td>
                <td>false</td>
            </tr>
        </table>
    </div>
</div>
